import { Radio } from 'antd'
import AccountGroups from './groups'
import Overview from './overview'

export function Accounts() {
  const [tab, setTab] = useState<'overview' | 'groups'>('overview')

  return <div css={s.wrap}>
    <div css={s.tabs}>
      <Radio.Group
        optionType="button"
        buttonStyle="solid"
        value={tab}
        onChange={e => setTab(e.target.value as typeof tab)}
      >
        <Radio value="overview">账号总览</Radio>
        <Radio value="groups">账号分组</Radio>
      </Radio.Group>
    </div>
    {tab === 'overview' ? <Overview /> : null}
    {tab === 'groups' ? <AccountGroups /> : null}
  </div>
}

const s = {
  wrap: css`
    margin-left: -48px;
  `,
  tabs: css`
    text-align: center;
    margin-bottom: 24px;
  `,
}
